
import * as React from 'react';
import { fetch } from '../../../renderers/util';
// import { DatePicker } from 'antd';
import {render} from '../../../renderers/factory';
import * as moment from 'moment';
import './style.scss';
import '../../../node_modules/echarts/map/js/china'

export default class TeamStatistic  extends React.Component {
    constructor(props) {
        super(props);
        this.changePanel = this.changePanel.bind(this);

        this.state = {
            volunteer_count: 0,
            volunteer_yesterday_count: 0,
            tab0: true,
            tab1: false,
            type: 0,
        };
    }

    componentDidMount() {
        fetch(`/api/statistics/volunteer/current`)
            .then(ret => this.setState({
                ...ret.data,
            }));
        fetch(`/api/user/info`)
            .then(ret => this.setState({
                ...ret.data,
            }));
    }

    changePanel(e) {
        if (!e && !this.state.tab0) {
            this.setState({
                tab0: true,
                tab1: false
            })
        }

        if (e && !this.state.tab1) {
            this.setState({
                tab0: false,
                tab1: true
            })
        }
    }

    render() {
        const {
            team_count,
            team_yesterday_count,
            tab0,
            tab1,
            type
        } = this.state;
        let defaultRangeDate = moment().add(-60, 'days').format('X') + ',' + moment().format('X'); // 默认dateRange为60天

        return (
            <div>
                <div className="bg-light b-b wrapper"><h1 className="m-n font-thin h3 text-black">志愿团队分析</h1></div>
                <div className="page-body wrapper">
                    <div className="tabs-wrapper">
                        <div id="tabs" className="">
                            <ul role="tablist" className="nav nav-tabs">
                                <li role="presentation" className={tab0 ? "active" : ""}
                                    onClick={() => this.changePanel(0)}>
                                    <a id="tabs-tab-0" role="tab" aria-controls="tabs-pane-0" aria-selected="true"
                                       href="#">
                                        团队增长
                                    </a>
                                </li>
                                <li role="presentation" className={tab1 ? "active" : ""}
                                    onClick={() => this.changePanel(1)}>
                                    <a id="tabs-tab-1" role="tab" aria-controls="tabs-pane-1" aria-selected="false"
                                       href="#" tabIndex="-1">
                                        团队属性
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div className="tab-content">
                        <div id="tabs-pane-0" aria-labelledby="tabs-tab-0" role="tabpanel" aria-hidden="false"
                             className={tab0 ? "tab-pane active fade in" : "tab-pane fade"}>
                            <div className="bg-white b-l b-r b-b wrapper-md">
                                <div className='info_box'>
                                    <div className="inner">
                                        <div className="info_hd append_ask">
                                            <h4>昨日关键指标</h4>
                                        </div>
                                        <div className="info_bd">
                                            <div className="content" id="js_keydata">
                                                <table className="ui_trendgrid ui_trendgrid_3">
                                                    <tbody>
                                                    <tr>
                                                        <td className="first">
                                                            <div className="ui_trendgrid_item">

                                                                <span className="text-color text-md">新增团队</span>
                                                                <div className="h1 text-info font-thin h2">
                                                                    {team_yesterday_count || 0}
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td className="first">
                                                            <div className="ui_trendgrid_item">

                                                                <span className="text-color text-md">累计团队</span>
                                                                <div className="h1 text-info font-thin h2">
                                                                    {team_count || 0}
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                                    <div className="row">
                                        {
                                            render('page', {
                                                type: 'page',
                                                title: '',
                                                bodyClassName: '',
                                                body: [
                                                    {
                                                        type: "form",
                                                        name: "sample2",
                                                        target: "chart1",
                                                        // reload: "chart1",
                                                        className: "chart-form",
                                                        wrapWithPanel: false,
                                                        submitText: '查询',
                                                        title: '',
                                                        mode: "inline",
                                                        controls:
                                                            [
                                                                {
                                                                    type: "date-range",
                                                                    name: "date_range",
                                                                    label: "日期范围",
                                                                    joinValues: true,
                                                                    value: defaultRangeDate
                                                                },

                                                                {
                                                                    type: "select",
                                                                    name: "org_id",
                                                                    label: "机构查询",
                                                                    placeholder: "机构名称",
                                                                    clearable: true,
                                                                    autoComplete: '/api/org/sug?not_options=1&_=${_}',
                                                                    visibleOn: 'acl.can("org:create")'
                                                                },
                                                            ]
                                                    },
                                                    {
                                                        type: "chart",
                                                        api: "/api/statistics/team/increase?org_id=${org_id}&date_range=${date_range}",
                                                        interval: false,
                                                        name: 'chart1',
                                                        className: "increase-chart",
                                                    }
                                                ]

                                            }, this.props)
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="tabs-pane-1" aria-labelledby="tabs-tab-1" role="tabpanel" aria-hidden="true"
                             className={tab1 ? "tab-pane active fade in" : "tab-pane fade"}>

                            <div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                                <legend>团队类型分布</legend>
                                <div className="row">
                                    {
                                        render('page', {
                                            type: 'page',
                                            title: '',
                                            bodyClassName: '',
                                            body: [
                                                {
                                                    type: "chart",
                                                    api: "/api/statistics/team/type?_=${_}",
                                                    interval: false,
                                                    name: 'chart2',
                                                    className: "normal-chart"
                                                }
                                            ]

                                        }, this.props)
                                    }
                                </div>
                            </div>
                            {
                                type === 4 ?

                                    (<div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                                            <legend>团队所属机构分布</legend>
                                            <div className="row">
                                                {
                                                    render('page', {
                                                        type: 'page',
                                                        title: '',
                                                        bodyClassName: '',
                                                        body: [
                                                            {
                                                                type: "chart",
                                                                api: "/api/statistics/team/org?_=${_}",
                                                                interval: false,
                                                                name: 'chart3',
                                                                className: "normal-chart"
                                                            }
                                                        ]

                                                    }, this.props)
                                                }
                                            </div>
                                        </div>
                                    ) : null
                            }
                            <div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                                <legend>省份分布</legend>
                                <div className="row">
                                    {
                                        render('page', {
                                            type: 'page',
                                            title: '',
                                            bodyClassName: '',
                                            body: [
                                                {
                                                    type: "chart",
                                                    api: "/api/statistics/team/area?_=${_}",
                                                    interval: false,
                                                    name: 'chart4',
                                                    className: "area-chart"
                                                }
                                            ]

                                        }, this.props)
                                    }
                                </div>
                            </div>
                            <div className="wrapper-md" style={{backgroundColor: '#fff'}}>
                                <legend>城市分布</legend>
                                <div className="row">
                                    {
                                        render('page', {
                                            type: 'page',
                                            title: '',
                                            className: 'page-province',
                                            bodyClassName: '',
                                            body: [
                                                {
                                                    type: "crud",
                                                    api: "get:/api/statistics/team/city",
                                                    columnsTogglable: false,
                                                    showHeader: false,
                                                    filter: {
                                                        title: "",
                                                        panelClassName: 'm-b-none bg-gd no-border',
                                                        bodyClassName: 'wrapper-sm',
                                                        submitText: "",
                                                        submitOnChange: true,
                                                        autoFocus: false,
                                                        controls: [
                                                            {
                                                                type: "select",
                                                                name: "city_name",
                                                                label: "",
                                                                // placeholder: "机构名称",
                                                                // value: '全国',
                                                                clearable: true,
                                                                autoComplete: '/api/statistics/province_info?_=${_}',
                                                            }
                                                        ]
                                                    },
                                                    columns: [
                                                        {
                                                            name: "city",
                                                            label: "城市",
                                                            width: 100
                                                        },

                                                        {
                                                            name: "value",
                                                            label: "用户数",
                                                            sortable: true,
                                                            width: 100

                                                        },
                                                        {
                                                            type: "progress",
                                                            label: '',
                                                            width: 220,
                                                            name: "progress"
                                                        }
                                                    ]

                                                }
                                            ],
                                        }, this.props)
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
};